<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '圈子',
  },
}
</route>

<template>
  <view class="bg">
    <view class="tabs mt-8 px-5">
      <text class="text-lg">全部</text>
      <text class="ml-4">最新</text>
      <text class="ml-4">最热</text>
    </view>
    <view class="tab-bottom"></view>
    <!-- 讨论版块 -->
    <view class="comment px-6" v-for="(item, index) in commentList" :key="index">
      <view class="top flex flex-items-center mt-5">
        <img class="avatar" :src="item.avatar" alt="" />
        <view class="flex flex-col justify-between ml-2">
          <text class="name">{{ item.name }}</text>
          <text class="time">{{ item.time }}</text>
        </view>
      </view>
      <view class="content">{{ item.comment }}</view>
      <view class="imgs flex flex-items-center justify-between mt-4">
        <img :src="item.img1" alt="" @click="handlePreview(item.img1)" />
        <img :src="item.img2" alt="" @click="handlePreview(item.img2)" />
      </view>
      <view class="bottom flex flex-items-center justify-between">
        <view class="btn">畅所欲言</view>
        <view class="right flex">
          <view class="nice" @click="handleNice(item, item.niceFlag)">
            <wd-icon
              name="thumb-up"
              :class="item.niceFlag ? 'like' : ''"
              :color="item.niceFlag ? 'red' : '#000000'"
              size="22px"
            ></wd-icon>
            <text>{{ item.nice }}</text>
          </view>
          <view class="number">
            <wd-icon name="chat" size="22px"></wd-icon>
            <text>{{ item.number }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <tabbar />
</template>

<script setup>
const handleNice = (item, niceFlag) => {
  niceFlag ? item.nice-- : item.nice++
  item.niceFlag = !item.niceFlag
}
const handlePreview = (url) => {
  uni.previewImage({
    urls: [url],
  })
}
const commentList = ref([
  {
    name: '王俊凯',
    avatar: new URL('@img/circle/avatar-1.png', import.meta.url).href,
    time: '今天09:21',
    comment: '也许 世界上也有五千朵和你一模一样的花但只有你是我独一无二的玫瑰',
    img1: new URL('@img/circle/img-1.png', import.meta.url).href,
    img2: new URL('@img/circle/img-1.png', import.meta.url).href,
    nice: 132,
    niceFlag: false,
    number: 132,
  },
  {
    name: '易烊千玺',
    avatar: new URL('@img/circle/avatar-2.png', import.meta.url).href,
    time: '今天09:21',
    comment: '有搭子一起去这个海边嘛？真的好美拍照巨好看！',
    img1: new URL('@img/circle/img-2.png', import.meta.url).href,
    img2: new URL('@img/circle/img-3.png', import.meta.url).href,
    nice: 132,
    niceFlag: false,
    number: 132,
  },
  {
    name: '王俊凯',
    avatar: new URL('@img/circle/avatar-2.png', import.meta.url).href,
    time: '今天09:21',
    comment: '有搭子一起去这个海边嘛？真的好美拍照巨好看！',
    img1: new URL('@img/circle/img-4.png', import.meta.url).href,
    img2: new URL('@img/circle/img-5.png', import.meta.url).href,
    nice: 132,
    niceFlag: false,
    number: 132,
  },
])
</script>

<style scoped lang="scss">
.bg {
  padding-bottom: 5rem;
  overflow: hidden;
  font-family: PingFangSC-regular;
  background: linear-gradient(
    86.39deg,
    rgba(159, 220, 250, 0.6) 4.39%,
    rgba(159, 219, 250, 0.61) 44.88%,
    rgba(170, 198, 254, 0.45) 127%
  );

  .tabs {
    text {
      width: 2rem;
      height: 1.44rem;
      font-family: SourceHanSansSC-regular;
      color: rgba(0, 0, 0, 1);
      text-align: left;
    }
  }

  .tab-bottom {
    width: 1.63rem;
    height: 0.38rem;
    margin-left: 1.63rem;
    background: linear-gradient(
      89.94deg,
      rgba(117, 214, 244, 1) 47.99%,
      rgba(92, 152, 254, 1) 100.25%
    );
    border-radius: 0.25rem;
  }

  .comment {
    .top {
      height: 2.88rem;

      .avatar {
        width: 2.88rem;
        height: 2.88rem;
        border-radius: 1.44rem;
      }

      .name {
        height: 1.56rem;
        font-family: SourceHanSansSC-regular;
        font-size: 1.13rem;
        line-height: 1.56rem;
        color: rgba(0, 0, 0, 1);
        text-align: left;
      }

      .time {
        height: 1.06rem;
        font-family: SourceHanSansSC-regular;
        font-size: 0.75rem;
        line-height: 1.06rem;
        color: #8799a5;
        text-align: left;
      }
    }

    .content {
      width: 16rem;
      height: 2.81rem;
      margin-top: 0.38rem;
      margin-left: 3.32rem;
      font-family: SourceHanSansSC-regular;
      font-size: 0.88rem;
      line-height: 1.35rem;
      color: #000000;
      text-align: left;
    }

    .imgs {
      img {
        width: 9.13rem;
        height: 8.88rem;
        border-radius: 0.75rem;
      }
    }

    .bottom {
      padding-left: 1.29rem;
      margin-top: 0.63rem;

      .btn {
        width: 3.94rem;
        height: 2rem;
        font-family: PingFangSC-regular;
        font-size: 0.88rem;
        line-height: 2rem;
        color: rgba(0, 86, 251, 1);
        text-align: center;
        background-color: rgba(239, 251, 255, 1);
        border-radius: 1rem;
      }

      .right {
        .nice {
          margin-right: 1.88rem;
        }
        .like {
          animation: pulse 1s ease-in-out;
        }
        @keyframes pulse {
          from {
            transform: scale3d(1, 1, 1);
          }
          50% {
            transform: scale3d(1.5, 1.5, 1.5);
          }
          to {
            transform: scale3d(1, 1, 1);
          }
        }
      }
    }
  }
}
</style>
